﻿<%@ Page Title="Core Features" Language="C#" MasterPageFile="~/Demo.master" Inherits="DemoPage" %>

<%@ Register Src="~/CodeFormatter.ascx" TagName="Code" TagPrefix="demo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="DemoHolder" runat="Server">
    <div class="dna-state-info ui-corner-all" style="margin-bottom: 10px;">
        Add the AnimationAttribute to set animate's options
    </div>
    <br />
    <br />
    <div style="height: 200px; padding: 30px; border: solid 1px #f3f3f3;">
        <asp:Panel runat="server" ID="AnimationPanel" class="ui-widget-content ui-corner-all"
            Width="200" Height="200">
            <h6 class="ui-widget-header ui-corner-all">
                Animation</h6>
            <p style="padding: 10px">
                This is the panel 's body
            </p>
        </asp:Panel>
    </div>
    <br />
    <input id="triggerInput" type="button" value="Run Animation" />
    <DotNetAge:Animation ID="SampleAnimation" runat="server" TriggerEvent="Click">
        <Target TargetID="AnimationPanel" />
        <Trigger TargetID="triggerInput" />
        <Animates>
            <DotNetAge:Animate>
                <Attributes>
                    <DotNetAge:AnimationAttribute AnimationType="opacity" Value="toggle" />
                    <DotNetAge:AnimationAttribute AnimationType="height" Value="toggle" />
                </Attributes>
            </DotNetAge:Animate>
        </Animates>
    </DotNetAge:Animation>
    <br />
    <br />
    <br />
    <demo:Code runat="server" ID="codeView" SourceFile="~/Animation/Codes/CoreSample.aspx" />
</asp:Content>
